<%-- 
    Document   : infoestado
    Created on : 07/07/2012, 20:25:11
    Author     : Rodrigo
--%>

<%@page import="model.Usuario"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Selecionar classe</title>
    </head>
    <body>
        <div style="position: absolute;">
            <c:set var="estado" value="${sessionScope.estadoSelecionado}" />

            <div style="text-align: center; position: relative; width: 800px;" class="textos">
                <h1>Selecione sua classe</h1>
            </div>

            <div style="text-align: center; position: relative; color: #FFFFFFFF;" class="textos">
            </div>
            <div class="subtitulo">Atenção! Ao clicar na imagem, você não poderá alterar esta classe posteriormente.</div>


            <div style="position: relative;">
                <div style="float:left">
                    <a style="text-decoration:none;" href="ClasseServlet?classe=guerreiro">
                        <div style="width: 139px; height: 200px; text-align: center;" class="guerreiro">
                        </div>
                        <div style="text-align: center; margin-bottom: 0; margin-top: 10px; color: green;" class="textos">
                            Guerreiro
                        </div>
                    </a>
                </div>

                <div style="float: left; margin-left: 5px;">

                    <div style="height: 200px;">
                        <div style="padding-top: 10%;">
                            <div style="float:left; margin-left: 10px; margin-top: 30px; margin-right: 10px;">
                                <div class="espada"></div>
                            </div>
                            <div style="float:left; margin-top: 25px;">
                                <label style="font-size: 30px; color: #66c2ff;">5</label>
                                <label style="font-size: 30px; color: #FFFFFFFF;"> +</label>
                                <label style="font-size: 30px; color: green;"><c:out value="${estado.guerreiro_forca}" /></label>
                                <label class="textos" style="font-size: 9px; bottom: 2px; margin-left: 0;">bônus</label>
                            </div>
                        </div>

                        <div style="clear: both; padding-top: 10%;">	
                            <div style="float:left; margin-left: 10px; margin-top: 30px; margin-right: 10px">
                                <div class="coracao"></div>
                            </div>

                            <div style="float:left; margin-top: 30px;">
                                <label style="font-size: 30px; color: #66c2ff;">70</label>
                                <label style="font-size: 30px; color: #FFFFFFFF;"> +</label>
                                <label style="font-size: 30px; color: green;"><c:out value="${estado.guerreiro_vida}" /></label>
                                <label class="textos" style="font-size: 9px; bottom: 2px; margin-left: 0;">bônus</label>
                            </div>
                        </div>		

                    </div>
                </div>
                <div style="float: right;">
                    <div style="float: left;">
                        <a style="text-decoration:none;" href="ClasseServlet?classe=arqueiro">
                            <div style="width: 139px; height: 200px; text-align: center;" class="arqueiro">
                            </div>
                            <div style="text-align: center; margin-bottom: 0; margin-top: 10px; color: green;" class="textos">
                                Arqueiro
                            </div>
                        </a>
                    </div>

                    <div style="float: left; margin-left: 5px; position:relative;">

                        <div style="height: 200px;">
                            <div style="padding-top: 10%;">
                                <div style="float:left; margin-left: 10px; margin-top: 30px; margin-right: 10px">
                                    <div class="flecha"></div>
                                </div>

                                <div style="position: relative; float:left; margin-top: 30px;">
                                    <label style="font-size: 30px; color: #66c2ff;">15</label>
                                    <label style="font-size: 30px; color: #FFFFFFFF;"> +</label>
                                    <label style="font-size: 30px; color: green;"><c:out value="${estado.arqueiro_forca}" /></label>
                                    <label class="textos" style="font-size: 9px; bottom: 2px; margin-left: 0;">bônus</label>
                                </div>

                            </div>

                            <div style="clear: both; padding-top: 10%;">	
                                <div style="float:left; margin-left: 10px; margin-top: 30px; margin-right: 10px">
                                    <div class="coracao"></div>
                                </div>
                                <div style="float:left; margin-top: 30px;">
                                    <label style="font-size: 30px; color: #66c2ff;">30</label>
                                    <label style="font-size: 30px; color: #FFFFFFFF;"> +</label>
                                    <label style="font-size: 30px; color: green;"><c:out value="${estado.arqueiro_vida}" /></label>
                                    <label class="textos" style="font-size: 9px; bottom: 2px; margin-left: 0;">bônus</label>
                                </div>
                            </div>		

                        </div>
                    </div>
                </div>
            </div>


            <div style="position: relative; clear: both;">
                <div style="float:left; margin-top: 30px;">
                    <a href="PrincipalServlet?acao=infoestado">
                        <div class="buttonvoltar" style="margin:0px;">
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</body>
</html>
